<template>
	<view :class="container" v-show="update">
		<view class="iconbc">
			<view :class="useClassName"></view>
		</view>
		<view class="text">
			<view class="date">{{itemData.date}}</view>
			<view class="tips">{{itemData.tips}}</view>
			<view class="cost">{{"￥"+itemData.cost}}</view>
		</view>
		<view class="delete">
			<button size="mini" @click="handleDelete" :disabled="login">删除</button>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			itemData:Object
		},
		data(){
			let l=!getApp().globalData.login
			return{
				update:true,
				login:l,
				// container:className
			}
		},
		computed:{
			useClassName(){
				return "t-icon t-icon-"+this.itemData.type
			},
			useCost(){
				return "￥"+this.itemData.cost.toString();
			},
			container(){
				return this.itemData.out?"container":"containerout"
			}
		},
		methods:{
			async handleDelete(){
			    uni.showModal({
					content:"你确认要删除此记录吗？",
					success:async (res)=>{
						if(res.confirm){
							let res=await uniCloud.callFunction({
								name:"deleteData",
								data:{id:this.itemData._id},
							})
							console.log(this.itemData)
							console.log(`数据${res.result}已删除`)
							getApp().globalData.listData=getApp().globalData.listData.filter(i=>i._id!=this.itemData._id)
							console.log(getApp().globalData.listData)
							this.update=false
						}
					}
				})
			}
		},
		onShow(){
			
		}
	}
</script>

<style lang="scss">
	.container{
		position: relative;
		background-color: #EDEDED;
		height: 200rpx;
		margin: 40rpx;
		border-radius: 20rpx;
		.iconbc{
			position: absolute;
			background-color: #FFFFFF;
			width: 150rpx;
			height: 150rpx;
			top: 25rpx;
			left: 25rpx;
			border-radius: 75rpx;
			box-shadow: 5rpx 5rpx #C7C7C7;
			.t-icon{
				position: absolute;
				left: 25rpx;
				top: 20rpx;
			}
		}
		.text{
			position: absolute;
			left: 200rpx;
			height: 200rpx;
			width: 300rpx;
			padding: 20rpx;
			view{
				padding: 5rpx;
			}
			.date{
				font-size: 12px;
			}
			.tips{
				font-size: 18px;
				overflow: hidden;
				-webkit-line-clamp: 1;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
			.cost{
				position: absolute;
				top: 120rpx;
				font-size: 24px;
			}
		}
		.delete button{
			display: inline-block;
			position: absolute;
			left: 520rpx;
			top: 120rpx;
		}
	}
	.containerout{
		position: relative;
		background-color: #FFFFE8;
		height: 200rpx;
		margin: 40rpx;
		border-radius: 20rpx;
		.iconbc{
			position: absolute;
			background-color: #FFFFFF;
			width: 150rpx;
			height: 150rpx;
			top: 25rpx;
			left: 25rpx;
			border-radius: 75rpx;
			box-shadow: 5rpx 5rpx #FFFFCC;
			.t-icon{
				position: absolute;
				left: 25rpx;
				top: 20rpx;
			}
		}
		.text{
			position: absolute;
			left: 200rpx;
			height: 200rpx;
			width: 300rpx;
			padding: 20rpx;
			view{
				padding: 5rpx;
			}
			.date{
				font-size: 12px;
			}
			.tips{
				font-size: 18px;
				overflow: hidden;
				-webkit-line-clamp: 1;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
			.cost{
				position: absolute;
				top: 120rpx;
				font-size: 24px;
			}
		}
		.delete button{
			display: inline-block;
			position: absolute;
			left: 520rpx;
			top: 120rpx;
		}
	}
</style>
